<template>
    <div class="flexbox flexcolumn height_100 com_box flexjust flexcenter">
        <AdverUser ref="adverRef" @getAdverData="getAdverData" />
        <AddUserRules ref="rulesRef" @getRulesData="getRulesData" />
        <ViewUserStrategy ref="viewRef"/>
        <div class="str_step flexbox flexcenter">
            <div class="step_box">
                <div class="step_header flexbox flexbetween flexcenter">
                    <span class="step_num">1</span>
                    <span class="step_status gray" v-if="!viewForm.is_adver">待设置</span>
                    <span class="step_status green" v-else>已完成</span>
                </div>
                <div class="step_content">
                    <p class="step_text">添加【广告账户】和【预警提醒人】</p>
                    <p class="step_tips">「自动投放操作」将应用到已选择广告账户上</p>
                    <el-button type="primary" plain size="mini" class="step_btn" v-if="!viewForm.is_adver" @click="addAdverList">去添加</el-button>
                    <el-button type="primary" plain size="mini" class="step_btn" v-else @click="addAdverList">修改</el-button>
                </div>
            </div>
            <svg class="step_icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="14.6663" cy="14.5" r="10.2" stroke="#616C85" stroke-width="2" />
                <path d="M14.6665 10.2998L14.6665 18.6998" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <path d="M10.4663 14.5L18.8663 14.5" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <div class="step_box">
                <div class="step_header flexbox flexbetween flexcenter">
                    <span class="step_num">2</span>
                    <span class="step_status gray" v-if="!viewForm.is_rules">待设置</span>
                    <span class="step_status green" v-else>已完成</span>
                </div>
                <div class="step_content">
                    <p class="step_text">添加【触发规则】</p>
                    <p class="step_tips">满足条件将执行自动投放操作</p>
                    <el-button type="primary" plain size="mini" class="step_btn" v-if="!viewForm.is_rules" @click="addRulesList">去添加</el-button>
                    <el-button type="primary" plain size="mini" class="step_btn" v-else @click="addRulesList">修改</el-button>
                </div>
            </div>
        </div>
        <div class="str_btn flexbox flexcolumn flexcenter">
            <el-form label-position='top' label-width="90px" :model="submitDataForm" :hide-required-asterisk='true' ref="submitDataForm">
                <el-form-item label="" prop="name" :rules="[{required: true,message: '请输入',trigger: ['blur', 'change']}]" style="margin-bottom:0">
                    <el-input maxlength="20" v-model="submitDataForm.name" placeholder="设置策略名称，最多20个字符" style="width:340px;" class="str_input"></el-input>
                </el-form-item>
            </el-form>
            <el-button plain class="plain_blue str_button" @click="viewStrategy">预览</el-button>
            <el-button type="primary" class="str_button" @click="submitForm('submitDataForm')" :disabled="loading" :loading="loading">保存设置</el-button>
        </div>
    </div>
</template>

<script>
import AdverUser from "./AdverUser";
import AddUserRules from "./AddUserRules";
import ViewUserStrategy from "./ViewUserStrategy";
export default {
    name: "",
    data() {
        return {
            loading: false,
            viewForm: {
                is_adver: true,
                adverData: [],
                is_rules: true,
                rulesDta: [],
            },
            submitDataForm: {
                advertiser_list: [],
                use_rule: [],
                name: "",
                template_id: "",
            },
            addStrategyRules: {
                group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {
        this.submitDataForm.template_id = this.$route.query.template_id;
        this.getDataList();
    },
    beforeDestroy() {},

    methods: {
        //获取策略详情
        async getDataList() {
            const { data: res } = await this.$http.post(
                "/autodrop/advertiser/templateFind",
                {
                    template_id: this.submitDataForm.template_id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                let childData = this.$refs.rulesRef.condition
                let rulesDta = []
                for(let i in childData){
                    for(let a in res.data.use_rule){
                        if(childData[i].value==res.data.use_rule[a].type){
                            rulesDta.push({
                                title: childData[i].title,
                                start_text:childData[i].start_text,
                                end_text:childData[i].end_text,
                                value: childData[i].value,
                                num:res.data.use_rule[a].value,
                            })
                        }
                    }
                }
                for(let i in rulesDta){
                    if(rulesDta[i].value==6){
                        let arr = res.data.use_rule.filter(item=>{return item.type==7})[0]
                        rulesDta[i].start_text2 = '转化目标为7日总支付roi时roi最小值'
                        rulesDta[i].num2 = arr.value
                    }else if(rulesDta[i].value==8){
                        let arr = res.data.use_rule.filter(item=>{return item.type==9})[0]
                        rulesDta[i].start_text2 = '转化目标为直播间结算时roi最小值'
                        rulesDta[i].num2 = arr.value
                    }
                }
                res.data.advertiser_list.map(item=>{return item.name=item.advertiser_name})
                this.viewForm.adverData = res.data.advertiser_list
                this.viewForm.rulesDta = rulesDta
                this.submitDataForm.name = res.data.name
            }
        },
        // 添加广告账号
        addAdverList() {
            this.$refs.adverRef.dialogVisible = true;
            this.$refs.adverRef.getRemindList();
            this.$refs.adverRef.tableData = this.viewForm.adverData;
        },
        getAdverData(data) {
            this.viewForm.adverData = data;
            if (this.viewForm.adverData.length > 0) {
                this.viewForm.is_adver = true;
            } else {
                this.viewForm.is_adver = false;
            }
        },

        // 添加规则组
        addRulesList() {
            this.$refs.rulesRef.dialogVisible = true;
            let isSelect = [
                {
                    title: "直播间下单/直播间成交出价最大值",
                    start_text: "【直播间下单/直播间成交出价最大值】大于",
                    value: 1,
                    num: "",
                    end_text:''
                },
            ];
            this.$refs.rulesRef.addRuleGroupForm.isSelect =
                this.viewForm.rulesDta.length > 0
                    ? this.viewForm.rulesDta
                    : isSelect;
            this.$refs.rulesRef.editor_uid = this.viewForm.rulesDta.length>0?this.viewForm.rulesDta.map(item=>{return item.value}):[1];
        },
        getRulesData(data) {
            this.viewForm.rulesDta = data;
            if (this.viewForm.rulesDta.length > 0) {
                this.viewForm.is_rules = true;
            }
        },


        // 预览规则
        viewStrategy() {
            this.$refs.viewRef.dialogVisible = true;
            this.$refs.viewRef.getRemindList()
            this.$refs.viewRef.viewForm.adverData = this.viewForm.adverData;
            this.$refs.viewRef.viewForm.rulesDta = this.viewForm.rulesDta;
        },

        // 提交保存
        submitForm(formName) {
            let flag = this.viewForm.is_adver && this.viewForm.is_rules;
            if (!flag) {
                this.$message.error("请完善信息！");
                return;
            }
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let use_rule = [];
                    let advertiser_list = [];
                    for (let i in this.viewForm.rulesDta) {
                        use_rule.push({
                            type: this.viewForm.rulesDta[i].value,
                            value: this.viewForm.rulesDta[i].num,
                        });
                    }
                    for(let i in this.viewForm.rulesDta){
                        if(this.viewForm.rulesDta[i].value==6){
                            let arr = {
                                type:7,
                                value:this.viewForm.rulesDta[i].num2,
                            }
                            use_rule.push(arr)
                        }else if(this.viewForm.rulesDta[i].value==8){
                            let arr = {
                                type:9,
                                value:this.viewForm.rulesDta[i].num2,
                            }
                            use_rule.push(arr)
                        }
                    }
                    for (let i in this.viewForm.adverData) {
                        advertiser_list.push({
                            advertiser_id:
                                this.viewForm.adverData[i].advertiser_id,
                            user_id: this.viewForm.adverData[i].user_id,
                        });
                    }
                    this.submitDataForm.advertiser_list = advertiser_list;
                    this.submitDataForm.use_rule = use_rule;
                    this.loading = true;
                    const { data: res } = await this.$http.post(
                        "/autodrop/advertiser/templateEdit",
                        this.submitDataForm
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.loading = false;
                        return;
                    } else {
                        this.$router.push({
                            path: "/strategyuser",
                        });
                        this.$message({
                            message: "添加成功",
                            type: "success",
                        });
                        this.loading = false;
                    }
                } else {
                    return false;
                }
            });
        },
    },
    components: {
        AdverUser,
        AddUserRules,
        ViewUserStrategy
    },
};
</script>


<style scoped>
.step_box {
    width: 537px;
    height: 180px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 0 24px;
}
.step_header {
    height: 56px;
    border-bottom: 1px solid #ebebeb;
}
.step_num {
    font-size: 16px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    background: rgba(165, 177, 209, 0.08);
    font-family: "DINPro";
    color: #616c85;
}
.step_status {
    width: 52px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    border-radius: 2px;
}
.step_status.gray {
    background: rgba(165, 177, 209, 0.08);
    color: #616c85;
}
.step_status.green {
    background: rgba(0, 194, 113, 0.05);
    color: #00c271;
}
.step_content {
    text-align: center;
    margin-top: 16px;
}
.step_text {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
}
.step_tips {
    font-size: 14px;
    color: #b4b7bd;
    margin-top: 4px;
}
.step_btn {
    border: 0;
    background: rgba(165, 177, 209, 0.08);
    margin-top: 16px;
    width: 120px;
}

.step_icon {
    margin: 0 15px;
}
.str_input {
    margin-top: 16px;
    text-align: center;
}
.str_button {
    width: 340px;
    margin-left: 0;
    margin-top: 16px;
}
</style>

<style>
.str_input .el-input__inner {
    text-align: center;
}
.step_btn.el-button--primary.is-plain:focus,
.step_btn.el-button--primary.is-plain:hover {
    color: #4475ff;
    background: rgba(165, 177, 209, 0.2);
}
</style>


